import React from 'react';
import { Button, Input, Row } from 'antd';
import { useNavigate } from 'react-router-dom';
import { connect } from 'react-redux';
import {
  template_on_search,
  template_res,
} from '../../../../store/actions/order';
const { Search } = Input;

function HeaderCom(props) {
  // console.log(props);
  const { templates, template_on_search, template_res } = props;
  const navigate = useNavigate();
  const onSearch = val => {
    if (val.trim()) {
      template_on_search(true);
      template_res(templates.filter(el => el.name.includes(val.trim())));
    } else {
      template_on_search(false);
    }
  };
  const goDetail = () => {
    navigate('/home/template-detail');
  };
  return (
    <Row justify='space-between'>
      <Button type='primary button' onClick={goDetail}>
        新建运费模板
      </Button>
      <Search
        placeholder='请输入模板名称'
        allowClear
        onSearch={onSearch}
        style={{
          width: 200,
        }}
      />
    </Row>
  );
}

export default connect(
  state => ({
    onSearch: state.templateSearchReducer,
    templates: state.templateReducer,
  }),
  {
    template_on_search,
    template_res,
  }
)(HeaderCom);
